﻿<!DOCTYPE html>
<html>

<head>
    <title>Cesium Demo</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="libs/Cesium/Widgets/widgets.css" />
    <link rel="stylesheet" href="css/scale.css" />
    <link rel="stylesheet" href="css/mousePosition.css" />
    <script type="text/javascript" src="libs/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="libs/cesium.map/cesium.map.min.js"></script>
    <script type="text/javascript" src="libs/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="libs/layer/layer.js"></script>
    <script type="text/javascript" src="libs/turf/turf.min.js"></script>

    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/scale.js"></script>
    <script type="text/javascript" src="js/mousePosition.js"></script>
    <script type="text/javascript" src="js/drawLine.js"></script>
    <script type="text/javascript" src="js/measure.js"></script>
    <script type="text/javascript" src="js/loadGltf.js"></script>
    <script type="text/javascript" src="js/RadarScan.js"></script>
    <script type="text/javascript" src="js/CircleScan.js"></script>
    <script type="text/javascript" src="js/flightPath.js"></script>

    <style type="text/css">
    </style>

</head>

<body style="margin: 0px;padding: 0px;">
    <div id="cesiumContainer" style="width: 100%; height: 900px;"></div>
    <div id="mousePosition"></div>
    <div id="scaleContainer"></div>
    <div
        style="position:absolute; left:20px; top:20px; background-color:transparent; width:1200px; height:30px; z-index:99998; border:solid 1px transparent;">
        <input type="button" onclick="reset()" value="复位" />
        <input type="button" onclick="toNorth()" value="正北" />
        <input type="button" onclick="showEntity()" value="展示" />
        <input type="button" onclick="measureDistance()" value="测距" />
        <input type="button" onclick="drawLineControl.startDraw()" value="画线" />
        <input type="button" onclick="drawLineControl.endDraw()" value="结束画线" />
        <input type="button" onclick="drawLineControl.clear()" value="清除画线" />
        <input type="button" onclick="showFlightPath()" value="飞行轨迹" />
    </div>

    <script type="text/javascript">
        $(function () {
            $("#cesiumContainer").height($(window).height()); //调整cesiumContainer高度
        });

        window.onresize = function (e) {
            $("#cesiumContainer").height($(window).height()); //调整cesiumContainer高度
        };

        var viewer = new Cesium.Viewer('cesiumContainer', {  //需要进行可视化的数据源的集合
            animation: false,                      //是否显示动画控件
            shouldAnimate: true,
            homeButton: false,                     //是否显示Home按钮
            fullscreenButton: true,                //是否显示全屏按钮
            baseLayerPicker: false,                //是否显示图层选择控件
            geocoder: false,                       //是否显示地名查找控件
            timeline: true,                       //是否显示时间线控件
            sceneModePicker: true,                 //是否显示投影方式控件
            navigationHelpButton: false,           //是否显示帮助信息控件
            infoBox: false,                        //是否显示点击要素之后显示的信息
            requestRenderMode: true,               //启用请求渲染模式
            scene3DOnly: false,                    //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3,                          //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            //fullscreenElement: document.body,    //全屏时渲染的HTML元素 暂时没发现用处
            selectionIndicator: false,
            imageryProvider: new Cesium.UrlTemplateImageryProvider({ //加载地图瓦片
                url: '',
            }),
        });

        var options = {
            url: Cesium.buildModuleUrl(baseUrl + '/tile/合肥影像地图高德瓦片') + '/{z}/{x}/{y}.jpg',
            //style: 'img', // style: img、elec、cva
            crs: 'WGS84', // 使用84坐标系，默认为：GCJ02
        }
        viewer.imageryLayers.removeAll();
        viewer.imageryLayers.add(new Cesium.ImageryLayer(new AmapImageryProvider(options)));

        (async () => {
            // 加载高程数据(Cesium 1.107版本之后地形加载方式有变化)
            const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(baseUrl + '/terrain', {
                requestWaterMask: true,
                requestVertexNormals: true,
            });
            viewer.terrainProvider = terrainProvider;
        })();

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(117.18, 31.82, 200000.0)
        });

        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

        //可视范围
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000000;
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 300;

        viewer.scene.globe.depthTestAgainstTerrain = true;

        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

        //viewer.scene.debugShowFramesPerSecond = true; 显示帧率和刷新率插件

        var layers = viewer.imageryLayers;
        viewer._cesiumWidget._creditContainer.style.display = "none";  //屏蔽loge广告

        //比例尺控件
        var scaleControl = new ScaleControl($("#scaleContainer"), viewer);

        //经纬度显示控件
        var mousePositionControl = new MousePositionControl($("#mousePosition"), viewer);

        //画线控件
        var drawLineControl = new DrawLineControl(viewer);

        //回调
        drawLineControl.setCallback(function (points) {
            var arr = [];
            points.map(point => {
                arr.push([point.x, point.y]);
            });
            //layer.msg(JSON.stringify(arr));
            layer.msg("线已更新，顶点数：" + points.length);
        });

        // 时间控件标签
        viewer.timeline.makeLabel = DateTimeFormatter;
        function DateTimeFormatter(datetime) {
            let julianDate = new Cesium.JulianDate();
            Cesium.JulianDate.addHours(datetime, 8, julianDate);
            let gregorianDate = Cesium.JulianDate.toGregorianDate(julianDate);
            let dateString = gregorianDate.year + '-' + gregorianDate.month + '-' + gregorianDate.day
                + ' ' + gregorianDate.hour.toString().padStart(2, '0') + ':' + gregorianDate.minute.toString().padStart(2, '0')
                + ':' + gregorianDate.second.toString().padStart(2, '0');
            return dateString;
        }
        $(viewer.timeline.container).hide();

        // 椭圆柱
        viewer.entities.add({
            id: 98777,
            position: Cesium.Cartesian3.fromDegrees(117.28, 31.82),
            ellipse: {
                semiMinorAxis: 600.0,
                semiMajorAxis: 1000.0,
                rotation: Cesium.Math.toRadians(15),
                material: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.2),
                extrudedHeight: 300
            },
        });

        // 半球
        viewer.entities.add({
            id: 98778,
            position: Cesium.Cartesian3.fromDegrees(117.20, 31.82),
            ellipsoid: {
                radii: new Cesium.Cartesian3(1200.0, 1200.0, 1200.0),
                maximumCone: Cesium.Math.PI_OVER_TWO,
                material: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.2),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString("#00ffff").withAlpha(0.2),
            },
        });

        // 雷达平扫
        const radarScan = new RadarScan(this.viewer);
        radarScan.add([117.20, 31.82, 0], '#ffff00', 1200, 3000);

        // 雷达圆扫
        // const circleScan = new CircleScan(this.viewer);
        // circleScan.add([117.20, 31.82, 0], '#ffff00', 1200, 3000);

        function getHeight(lon, lat) {
            var carto = new Cesium.Cartographic.fromDegrees(lon, lat);　　//输入经纬度
            var h = viewer.scene.globe.getHeight(carto);
            return h;
        }

        function showEntity() {
            viewer.entities.add({
                id: 'polyline2',
                name: 'polyline2',
                polyline: {
                    positions: [Cesium.Cartesian3.fromDegrees(117.18, 31.82, 10), Cesium.Cartesian3.fromDegrees(117.183, 31.826, 10)],
                    width: 3,
                    material: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.5),
                    depthFailMaterial: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.5)
                }
            });

            viewer.entities.add({
                name: 'polyline3',
                polyline: {
                    positions: [Cesium.Cartesian3.fromDegrees(117.183, 31.826, 10), Cesium.Cartesian3.fromDegrees(117.182, 31.82, 10)],
                    width: 3,
                    material: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.5),
                    depthFailMaterial: Cesium.Color.fromCssColorString("#ff0000").withAlpha(0.5)
                }
            });

            viewer.entities.add({
                id: 'rect1',
                name: 'rect1',
                position: Cesium.Cartesian3.fromDegrees(117.18, 31.82, 10),
                point: {
                    pixelSize: 20,
                    color: Cesium.Color.fromCssColorString("#ffffff").withAlpha(0.8),
                    outlineColor: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.8),
                    outlineWidth: 3,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                }
            });
            ent = viewer.entities.getById("rect1");

            viewer.entities.add({
                id: 'rect2',
                name: 'rect2',
                position: Cesium.Cartesian3.fromDegrees(117.183, 31.826, 10),
                point: {
                    pixelSize: 20,
                    color: Cesium.Color.fromCssColorString("#ffffff").withAlpha(0.8),
                    outlineColor: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.8),
                    outlineWidth: 3,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                }
            });

            viewer.entities.add({
                id: 'rect3',
                name: 'rect3',
                position: Cesium.Cartesian3.fromDegrees(117.182, 31.82, 10),
                point: {
                    pixelSize: 20,
                    color: Cesium.Color.fromCssColorString("#ffffff").withAlpha(0.8),
                    outlineColor: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.8),
                    outlineWidth: 3,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                }
            });

            // 圆锥
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(117.183, 31.846),
                cylinder: {
                    length: 1000.0,
                    topRadius: 0.0,
                    bottomRadius: 500.0,
                    material: Cesium.Color.fromCssColorString("#0000ff").withAlpha(0.2)
                },
            });
        }

        //复位
        function reset() {
            getCamera();

            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(117.1698323, 31.8099471608, 449.219242),
                orientation: {
                    heading: Cesium.Math.toRadians(20.4603906),      // east, default value is 0.0 (north)
                    pitch: Cesium.Math.toRadians(-11.568667),    // default value (looking down)
                    roll: Cesium.Math.toRadians(0.0004957872),     // default value
                }
            });
        }

        //测距
        let measure = new Measure(viewer);

        //测距
        function measureDistance() {
            measure.measureDistance();
        }

        // 加载GLTF模型
        let loadGltf = new LoadGltf(viewer);
        loadGltf.loadGltf();

        // 飞行轨迹
        function showFlightPath() {
            let flightPath = new FlightPath(viewer);
            flightPath.start();
        }

    </script>

</body>

</html>